<template>
  <view>
    <u-navbar height="50" title="订单详情" title-size="36" title-color="#333"></u-navbar>
    <view class="layoutView">
      <view class="orderStatus" v-if="orderInfo.status == -1">已取消</view>
      <view class="orderStatus" v-if="orderInfo.status == 1">待处理</view>
      <view class="orderStatus" v-if="orderInfo.status == 2">待发货</view>
      <view class="orderStatus" v-if="orderInfo.status == 3">待收货</view>
      <view class="orderStatus" v-if="orderInfo.status == 4">待收货</view>
      <view class="orderStatus" v-if="orderInfo.status == 5">已完成</view>
      <view class="" style="font-size: 28rpx; line-height: 50rpx">
        <view class="order-address"> 贵州贵阳南明区花果园大街100号 </view>
        <view class="order-contacts"> 赵先生&nbsp;&nbsp;1960009442 </view>
        <view class="mer-chat"> 联系用户 </view>
      </view>
    </view>
    <view class="layoutView" v-if="orderInfo">
      <view class="layoutText">商品信息</view>
      <view class="goodsView" v-for="(item, index) in goodsList" :key="index">
        <u-image
          width="160rpx"
          height="160rpx"
          border-radius="10"
          :src="item.store_goods_sku.sku_array.pic"
          v-if="item.store_goods_sku"
        ></u-image>
        <u-image width="160rpx" height="160rpx" border-radius="10" v-else></u-image>
        <view class="goodsData">
          <view class="goodsName" v-if="item.store_goods">{{ item.store_goods.goods_name }}</view>
          <view class="skuView">
            <text class="goodsSku" v-if="item.store_goods_sku">
              {{ item.store_goods_sku.attr_array.join(',') }}</text
            >
            <view class="goodsNum">x{{ item.goods_number }}</view>
          </view>
          <view class="goodsPrice" v-if="item.store_goods_sku">
            ¥{{ item.store_goods_sku.sku_array.price }}</view
          >
        </view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="moneyView">
        <view class="moneyTitle">
          <view>商品总价</view>
        </view>
        <view class="moneyText">¥{{ orderInfo.goods_price }}</view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="moneyView" v-if="orderInfo.distribution_type == 1">
        <view class="moneyTitle">
          <view>配送费用</view>
        </view>
        <view class="moneyText" v-if="Number(orderInfo.express_price) > 0"
          >¥{{ orderInfo.express_price }}</view
        >
        <view class="moneyText" v-else>包邮</view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="allPriceView">
        <text class="allTitle">共{{ goodsList.length }}件 合计：</text>
        <text class="allPrice">¥{{ orderInfo.pay_price }}</text>
      </view>
    </view>
    <view class="layoutView" v-if="orderInfo">
      <view class="orderTitle">订单信息</view>
      <view class="orderText">交易单号：{{ orderInfo.order_no }}</view>
      <view class="orderText">创建时间：{{ orderInfo.created_at }}</view>
      <view class="orderText" v-if="orderInfo.distribution_type == 1">订单类型：配送到家</view>
      <view class="orderText" v-if="orderInfo.distribution_type == 2">订单类型：到店自提</view>
      <view class="orderText" v-if="orderInfo.remark">订单备注：{{ orderInfo.remark }}</view>
      <view v-if="orderInfo.distribution">
        <view class="orderText" v-if="orderInfo.distribution.express_company">
          物流公司：{{ orderInfo.distribution.express_company }}</view
        >
        <view class="orderText" v-if="orderInfo.distribution.express_number">
          <view style="flex: 1">快递单号：{{ orderInfo.distribution.express_number }}</view>
          <view @click="onCopy(orderInfo.distribution.express_number)">复制</view>
        </view>
      </view>
    </view>
    <u-gap height="100"></u-gap>
    <view class="bottomView">
      <text
        class="hollow-btn"
        v-if="orderInfo.status == 0"
        @click.stop.prevent="onOrderCancel(orderInfo)"
        >拒绝订单</text
      >
      <text
        class="solid-btn"
        v-if="orderInfo.status == 1"
        @click.stop.prevent="onOrderPayment(orderInfo)"
        >立即接单</text
      >
      <text class="solid-btn" v-if="orderInfo.status == 2" @click="show = true">确认发货</text>
      <!-- 	<text class="confrimOrder2" v-if="orderInfo.status == 2"
				@click.stop.prevent="onOrderConfrim(orderInfo)">确认收货</text> -->
      <text
        class="confrimOrder2"
        v-if="orderInfo.status == 3"
        @click.stop.prevent="onOrderConfrim(orderInfo)"
        >查看退货原因</text
      >
    </view>

    <u-popup v-model="show" mode="center" height="500" border-rad border-radius="15">
      <view class="popup-box">
        <view class="popup-title"> 商品发货 </view>

        <view class="">
          <view class=""> 请选择快递公司 </view>
          <input
            style="width: 100%; height: 120rpx; margin: 15rpx 0"
            name=""
            placeholder="请输入快递单号"
            id=""
            cols="50"
            rows="20"
          />
        </view>
        <view class="">
          <view class="submit-btn btn"> 确认发货 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      orderId: '',
      orderInfo: {
        status: 2
      },
      starNum: [1, 2],
      starNum2: [1, 2, 3],
      goodsList: [],
      leval: ''
    }
  },
  onLoad(res) {
    this.orderId = res.id ? res.id : ''

    if (this.starNum.length < 2) {
      this.leval = '差'
    } else if (this.starNum.length < 4) {
      this.leval = '一般'
    } else {
      this.leval = '优秀'
    }
  },
  onShow() {
    //this.initData();
  },

  methods: {
    initData() {
      let self = this
      self.$u.api.getOrderDetail(this.orderId).then((res) => {
        self.orderInfo = res.data
        self.goodsList = res.data.store_goods
      })
    },
    onLocation(store) {
      uni.openLocation({
        latitude: Number(store.address_lat),
        latitude: Number(store.address_lng),
        success() {}
      })
    },
    onCallPhone(store) {
      uni.makePhoneCall({
        phoneNumber: store.phone,
        fail(res) {
          uni.$u.toast(JSON.stringify(res))
        }
      })
    },
    onCopy(number) {
      let self = this
      uni.setClipboardData({
        data: number,
        success: function () {
          self.$u.toast('复制成功')
        }
      })
    }
  }
}
</script>

<style>
@import url('../../style/btn.css');
@import url('../../goods/order-details/order-details.css');
page {
  background: #f2f2f2;
}

.tabsView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  height: 90rpx;
}

.goodsItemView {
  display: flex;
  flex-direction: column;
}

.itemView {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  margin-bottom: 1rem;
  border-radius: 6px;
  padding: 20rpx;
}

.order-top {
  position: relative;
  padding: 15rpx 0;
  font-size: 30rpx;
}

.order-top-tip {
  position: absolute;
  top: 15rpx;
  right: 0;
  color: #999999;
}

.order-goods {
  display: flex;
}

.goods-img {
  border-radius: 20rpx;
}

.orde-riget {
  width: 100%;
  margin-left: 10rpx;
  line-height: 55rpx;
  font-size: 26rpx;
}

.goods-speci {
  position: relative;
}

.goods-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
}
.goods-price {
  font-size: 30rpx;
  color: #f54831;
}
.price-total {
  padding: 20rpx 0;
  border-top: #ededed solid 2rpx;
  border-bottom: #ededed solid 2rpx;
  text-align: right;
  font-size: 28rpx;
  margin: 15rpx 0;
}

.btn-group {
  display: flex;
  flex-direction: row-reverse;
}

.btn {
  margin-top: 120rpx;
}
</style>
